<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            margin: 50px;
        }
    </style>
</head>

<body>
    <!--
        属性节点(html属性 => 标签内可见的)
        (1)写在标签内,和标签名以一个空格分隔叫做属性, 
        (2)组成: 属性名="属性值" 
        (3)属性可以没有也可以有多个,多个之间用空格分隔
            属性是对标签的说明 
    -->
    <div style="background-color:#f00">
        <span>这是标签内的文本</span>
    </div>
</body>
<script>
    /* 
        属性节点(html属性 => 标签内可见的)
            (1)写在标签内,和标签名以一个空格分隔叫做属性, 
            (2)组成: 属性名="属性值" 
            (3)属性可以没有也可以有多个,多个之间用空格分隔
                属性是对标签的说明  

        操作属性节点:
            box.setAttribute(key,value)
            box.getAttribute(key)
            box.removeAttribute(key)
    */

    /* 
        元素节点的属性 (元素节点的内置属性和方法 => 官方定义)
        (1) 元素节点也是一个对象类型的数据(引用类型),  有自己的属性和方法
        (2) 每个元素节点都是一个特殊的对象,官方给每个元素内置的属性和方法

        元素节点的属性(元素的内置属性)   => 通用
            Element.parentElement
            Element.children
            Element.previousElementSibling
            Element.nextElementSibling

            Element.innerHTML
            Element.innerText
            Element.textContent
            Element.outerHTML
            
            Element.id
            Element.className
            Element.classList  (add remove replace contains toggle(没有就新增, 有就删除) forEach)
            Element.title

            Element.dataset

            Element.style
            window.getComputedStyle(ele)  传入一个元素,返回该元素的css样式声明的对象(内部 外部 内联 默认)

        
        元素节点的属性(元素的内置属性)   => 某些元素独有的

        


            



        元素节点的方法
            Element.setAttribute(key,value)
            Element.getAttribute(key)
            Element.removeAttribute(key)
    
    */

    var box = document.querySelector("div");
    console.dir(box);

    console.log(box.style); // css样式声明的对象(仅限内联)

    // style只能获取行内样式(内联演示)
    // console.log(box.style.width);
    // console.log(box.style.height);
    // console.log(box.style.backgroundColor);

    // 如果想获取内部样式 外部样式怎么办?

    // 常规浏览器(IE高版本)  => 低版本IE(ie8以及以下不生效)
    // window.getComputedStyle(ele)  传入一个元素,返回该元素的css样式声明的对象(内部 外部 内联 默认)

    // 低版本IE(了解)
    // box.currentStyle   低版本IE中存在内置属性currentStyle,存储该元素的css样式声明的对象(内部 外部 内联 默认)


    // 常规浏览器的写法
    /* var result = window.getComputedStyle(box);
    console.log(result);  // 返回该元素的css样式声明的对象
    // 对应属性名取值
    console.log(result.width);
    console.log(result.height);
    console.log(result.backgroundColor);
    console.log(result.backgroundPosition); */

    // IE低版本的写法 (注意: 常规浏览器没有currentStyle属性 默认返回undefined)
    // console.log(box.currentStyle);  // cssStyleDeclaration {}
    // console.log(box.currentStyle.width);  
    // console.log(box.currentStyle.height); 


    // 兼容性写法
    // 判断设备是高版本还是低版本, 高版本走高版本的,低版本走低版本的

    // 判断是否存在  window.getComputedStyle方法
    /* if(window.getComputedStyle){ // 有=> 常规浏览器
        console.log(window.getComputedStyle(box).width);
    }else{ // 没有 => 低版本IE
        console.log(box.currentStyle.width);
    }


    if(window.getComputedStyle){ // 有=> 常规浏览器
        console.log(window.getComputedStyle(box).height);
    }else{ // 没有 => 低版本IE
        console.log(box.currentStyle.height);
    }*/


    function getStyle(ele,cssKey) {
        if (window.getComputedStyle) { // 有=> 常规浏览器
           return window.getComputedStyle(ele)[cssKey];   //window.getComputedStyle(box)["width"] 
        } else { // 没有 => 低版本IE
           return ele.currentStyle[cssKey];
        }
    }


    console.log(getStyle(box,"width"));;
    console.log(getStyle(box,"height"));;
    console.log(getStyle(box,"backgroundColor"));;






</script>

</html>